<template>
  <div id="app" class="indexPage">
    <div class="index-user-box clearfix">
      <div class="user-file-image role-user fl">
        <div class="block-fx">
          <el-image style="width: 80px; height: 80px;border-radius:50%;overflow:hidden;">
            <!-- 默认图片 -->
            <div slot="error" class="image-slot">
              <img v-if="user.avatar" width="80" height="80" :src="user.avatar" />
              <img
                v-if="!user.avatar"
                width="80"
                height="80"
                src="@/assets/images/default-user-img.png"
              />
            </div>
          </el-image>
        </div>
        <div class="block-fx user-info">
          <h1>您好，{{user.name}}</h1>
          <p>{{roles}}</p>
        </div>
      </div>
      <div class="fr">
        <div class="total-item">
          <div class="icon1">
            <div class="icon-bg">
              <i class="iconfont iconhome4"></i>
            </div>参保地
          </div>
          <div class="total-num">{{counter.addrCount}}</div>
        </div>
        <div class="total-item">
          <div class="icon2">
            <div class="icon-bg">
              <i class="iconfont iconhome2"></i>
            </div>服务公司
          </div>
          <div class="total-num">{{counter.companyCount}}</div>
        </div>
      </div>
    </div>

    <div class="total-list">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="total-list-item">
            <div class="icon-bg icon3">
              <i class="iconfont iconhome1"></i>
            </div>
            <div class="total-list-num">
              <div class="total-num">{{counter.socialProductCount}}</div>
              <p>社保方案</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-list-item">
            <div class="icon-bg icon4">
              <i class="iconfont iconhome3"></i>
            </div>
            <div class="total-list-num">
              <div class="total-num">{{counter.accfundProductCount}}</div>
              <p>公积金方案</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-list-item">
            <div class="icon-bg icon5">
              <i class="iconfont iconhome"></i>
            </div>
            <div class="total-list-num">
              <div class="total-num">{{counter.bussProductCount}}</div>
              <p>商保方案</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="total-list-item">
            <div class="icon-bg icon6">
              <i class="iconfont iconhome5"></i>
            </div>
            <div class="total-list-num">
              <div class="total-num">{{counter.disableProductCount}}</div>
              <p>残保金方案</p>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 统计图表 -->
    <div class="echar-list">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="echar-box">
            <div class="user-title2">
              <span>业务覆盖TOP8</span>
            </div>
            <div id="chart1" style="width: 600px;height: 300px;"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="echar-box clearfix">
            <div class="user-title2">
              <span>业务覆盖城市</span>
            </div>
            <div class="clearfix" style="width:80%;color:#666;padding:20px 0;margin:auto;">
              <div class="fl">
                <small>服务城市各业务覆盖率</small>
              </div>
              <div class="fr">
                <small>城市总量：{{totalCity}}个</small>
              </div>
            </div>
            <div class="chart-box" id="chart2" style="width: 183px;height: 237px;"></div>
            <div class="chart-box" id="chart3" style="width: 183px;height: 237px;"></div>
            <div class="chart-box" id="chart4" style="width: 183px;height: 237px;"></div>
          </div>
        </el-col>
      </el-row>
      <div><div id="container" style="height: 100%"></div></div>
    </div>
    <!-- 折线图 -->
    <div style="height:20px;width:100%;"></div>
    <div class="echar-list">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="echar-box">
            <div class="user-title2">
              <span>订单金额走势</span>
            </div>
            <div id="aa" :style="{width: '500px', height: '300px'}"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="echar-box clearfix">
            <div class="user-title2">
              <span>服务人数走势</span>
            </div>
            <div id="bb" :style="{width: '500px', height: '300px'}"></div>
          </div>
        </el-col>
      </el-row>
      <div><div id="container" style="height: 100%"></div></div>
    </div>
     <!-- 柱形图 -->
    <div style="height:20px;width:100%;"></div>
    <div class="echar-list">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="echar-box">
            <div class="user-title2">
              <span>新增客户数</span>
            </div>
            <div id="cc" :style="{width: '500px', height: '300px'}"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="echar-box clearfix">
            <div class="user-title2">
              <span>新增社保参保地</span>
            </div>
            <div id="dd" :style="{width: '500px', height: '300px'}"></div>
          </div>
        </el-col>
      </el-row>
      <div><div id="container" style="height: 100%"></div></div>
    </div>
  </div>
</template>
<script>
import Http from "@/libs/http.js";
import echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      roles: JSON.parse(localStorage.user).roles,
      totalCity: 0,
      counter: {},
      user: JSON.parse(localStorage.user).user,
      charts: "",
      //条形图
      charts1Opinion: [
        "湖南",
        "广东",
        "湖北",
        "江苏",
        "北京",
        "上海",
        "四川",
        "河南"
      ],
      charts1OpinionData: [
        {
          name: "社保",
          type: "bar",
          data: []
        },
        {
          name: "公积金",
          type: "bar",
          data: []
        },
        {
          name: "残保金",
          type: "bar",
          data: []
        }
      ],
      //饼图
      opinionPieData1: [
        { value: 28, name: "社保", itemStyle: { color: "#8fccc4" } },
        { value: 72, name: "尚未服务城市", itemStyle: { color: "#F0F2F5" } }
      ],
      opinionPieData2: [
        { value: 22, name: "公积金", itemStyle: { color: "#ff8b2b" } },
        { value: 78, name: "尚未服务城市", itemStyle: { color: "#F0F2F5" } }
      ],
      opinionPieData3: [
        { value: 50, name: "残保金", itemStyle: { color: "#ffe22f" } },
        { value: 50, name: "尚未服务城市", itemStyle: { color: "#F0F2F5" } }
      ]
    };
  },
  created() {
    this.getCount();
  },
  methods: {
    getCount() {
      Http.api.get("/report/count").then(res => {
        this.counter = res.data;
      });
    },
    //柱形图1
    pait1(id){
                this.charts = echarts.init(document.getElementById(id));
                this.charts.setOption({
                  xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        itemStyle: {
          normal: {
            color: function(params) {
               var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
               return colorList[params.dataIndex]
            }
          }
        }
    }]
                })
      },
      //柱形图2
    pait2(id){
                this.charts = echarts.init(document.getElementById(id));
                this.charts.setOption({
                 xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [4, 2, 4, 8, 7, 3, 5],
        type: 'bar',
        itemStyle: {
          normal: {
            color: function(params) {
               var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622'];
               return colorList[params.dataIndex]
            }
          }
        }
    }]
                })
      },
    //折线图
    info(id){
                this.charts = echarts.init(document.getElementById(id));
                this.charts.setOption({
                  xAxis: {
                      type: 'category',
                      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                  },
                  yAxis: {
                      type: 'value'
                  },
                  series: [{
                      data: [150, 230, 224, 218, 135, 147, 260],
                      type: 'line'
                  }]
                })
      },
      //折线图2
    infos(id){
                this.charts = echarts.init(document.getElementById(id));
                this.charts.setOption({
                  xAxis: {
                      type: 'category',
                      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                  },
                  yAxis: {
                      type: 'value'
                  },
                  series: [{
                      data: [15, 20, 24, 28, 15, 17, 20],
                      type: 'line'
                  }]
                })
      },
    //   条形图
    drawBar(id) {
      this.charts = echarts.init(document.getElementById(id));
      Http.api.get("/report/province").then(res => {
        let data = res.data;
        let xData = new Array();
        for (let i in data) {
          let item = data[i];
          xData.push(item.provinceName);
          this.charts1OpinionData[0].data.push(item.socialCount);
          this.charts1OpinionData[1].data.push(item.accfundCount);
          this.charts1OpinionData[2].data.push(item.disableCount);
        }
        this.charts.setOption({
          barMaxWidth: "8",
          barGap: "80%",
          color: ["#8fccc4", "#ff8b2b", "#ffe22f"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            backgroundColor: "rgba(0,0,0,0.8)"
          },
          legend: {
            top: 20,
            data: ["社保", "公积金", "残保金"]
          },
          grid: {
            left: "3%",
            bottom: "3%",
            containLabel: true
          },
          yAxis: {
            type: "value",
            axisLine: {
              show: false,
              lineStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              lineStyle: {
                color: "#f5f5f5"
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#666"
              }
            }
          },
          xAxis: {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#fff"
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#666"
              },
              interval: 0,
              formatter: function(value) {
                debugger;
                var ret = ""; //拼接加\n返回的类目项
                var maxLength = 3; //每项显示文字个数
                var valLength = value.length; //X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                if (rowN > 1) {
                  //如果类目项的文字大于3,
                  for (var i = 0; i < rowN; i++) {
                    var temp = ""; //每次截取的字符串
                    var start = i * maxLength; //开始截取的位置
                    var end = start + maxLength; //结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + "\n";
                    ret += temp; //凭借最终的字符串
                  }
                  return ret;
                } else {
                  return value;
                }
              }
            },
            data: xData
          },
          series: this.charts1OpinionData
        });
      });
    },
    //饼图
    drawPie(id, dataList) {
      let charts = echarts.init(document.getElementById(id));
      charts.setOption({
        series: [
          {
            name: "服务城市各业务覆盖率",
            silent: true,
            hoverAnimation: false,
            type: "pie",
            radius: ["70%", "90%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                formatter: "{css1|{d}%}\n{css2|{b}}",
                rich: {
                  css1: { color: "#000", fontSize: 26, fontWeight: "bold" },
                  css2: { color: "#666", fontSize: 14, lineHeight: 24 }
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            //这里调用不会 请修改一下，圆环样式已经写好，分别对应 1、2、3三个数据
            data: dataList
          }
        ]
      });
      charts.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0
      });
    },
    drawPies() {
      Http.api.get("report/city").then(res => {
        this.opinionPieData1[0].value = res.data.socialCount;
        this.opinionPieData1[1].value =
          res.data.totalCount - res.data.socialCount;
        this.opinionPieData2[0].value = res.data.accfundCount;
        this.opinionPieData2[1].value =
          res.data.totalCount - res.data.accfundCount;
        this.opinionPieData3[0].value = res.data.disableCount;
        this.opinionPieData3[1].value =
          res.data.totalCount - res.data.disableCount;
        this.totalCity = res.data.totalCount;
        this.drawPie("chart2", this.opinionPieData1);
        this.drawPie("chart3", this.opinionPieData2);
        this.drawPie("chart4", this.opinionPieData3);
      });
    }
  },
  //调用
  mounted() {
    this.pait1('cc');
    this.pait2('dd');
    this.info('aa');
    this.infos('bb');
    this.drawBar("chart1");
    this.drawPies();
  }
};
</script>

<style scoped>
</style>
